<template>
  <page class="product-execu-spotcheck">
    <p-spin :spinning="loading">
      <div class="table-page-search-wrapper">
        <p-form layout="inline">
          <p-row :gutter="24">
            <p-col :xl="6">
              <p-form-item label="工序工单">
                <p-input :value="item.processBillNo" disabled />
              </p-form-item>
            </p-col>
            <p-col :xl="6">
              <p-form-item label="产品编码">
                <p-input :value="item.productcode" disabled />
              </p-form-item>
            </p-col>
            <p-col :xl="6">
              <p-form-item label="产品描述">
                <p-input :value="item.productname" disabled />
              </p-form-item>
            </p-col>
            <p-col :xl="6">
              <p-form-item label="计划数量">
                <p-input :value="item.planQty" disabled />
              </p-form-item>
            </p-col>
          </p-row>
        </p-form>
      </div>

      <p-table
        v-if="error"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        size="middle"
        row-key="resourceCode"
        bordered
      >
        <template slot="spotCheckOdd" slot-scope="text, record">
          <a v-if="text" @click="viewSpotCheck(record)">{{ text }}</a>
        </template>
        <template slot="status" slot-scope="text">
          <p-tag v-if="text === 0" color="blue">待点检</p-tag>
          <p-tag v-else-if="text === 1" color="green">已完成</p-tag>
        </template>
        <template slot="action" slot-scope="text, record">
          <a v-if="record.status === 0" @click="toSpotCheck(record)">点检</a>
        </template>
      </p-table>

      <div v-else-if="error === false" class="spot-check-error">
        <a-icon type="exclamation-circle" />
        <p class="spot-check-error__title">请注意！</p>
        <p>触发开线点检失败：<span style="color: red">{{ options && options.error || '' }}</span></p>
        <p>
          <a>开班点检</a>
          <p-divider type="vertical" />
          <a>触发提醒</a>
        </p>
      </div>
    </p-spin>
    <component
      v-model="visible"
      :is="currentView"
      :item="item"
      :resource="resource"
      :options="options"
      :type="type"
      @callback="getData"
    />
  </page>
</template>

<script>
import mixins from './info-mixins'
import { getAction, postAction } from '@/api/manage'

export default {
  mixins: [mixins],
  components: {
    SpotCheckModal: () => import('./spot-check-modal'),
    SpotCheckView: () => import('./spot-check-view'),
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          align: 'center',
          width: 80,
          customRender(text, record, index) {
            return index + 1
          }
        },
        {
          title: '点检单号',
          dataIndex: 'spotCheckOdd',
          align: 'center',
          width: 200,
          scopedSlots: {
            customRender: 'spotCheckOdd'
          }
        },
        {
          title: '点检名称',
          dataIndex: 'resourceName',
          align: 'center',
          width: 200,
        },
        {
          title: '点检类型',
          dataIndex: 'resourceTypeName',
          align: 'center',
          width: 200,
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: 100,
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 80,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      params: {
      },
      error: null,
      visible: false,
      currentView: '',
      resource: null,
      type: 'view'
    }
  },
  watch: {
    item() {
      this.check()
    }
  },
  mounted() {
    this.check()
  },
  methods: {
    check() {
      if (this.item && this.item.id) {
        this.loading = true
        const params = {
          processBillId: this.item.id
        } 
        getAction('/mes-manufacture/mfLineTheTally/getLastSpotCheckProduct', params).then(res => {
          if (res.code === 0) {
            this.error = res.data
            if (res.data) {
              this.pagination.current = 1
              this.getData()
            }
          } else {
            this.error = null
            this.loading = false
          }
        })
      } else {
        this.error = null
      }
    },
    getData() {
      this.loading = true
      const { processBillNo, processCoding, processVersion } = this.item
      const { lineno, stationCode } = this.options
      const { current, pageSize } = this.pagination
      const params = {
        pageNo: current,
        limit: pageSize,
        processBillNo,
        processCoding: processCoding,
        processVersion: processVersion,
        lineNo: lineno,
        workstationcode: stationCode,
      }
      postAction('/mes-manufacture/mfLineTheTally/getAllSpotChecks', params).then(res => {
        this.loading = false
        if (res.code === 0) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.dataSource = []
          this.pagination.total = 0
        }
      })
    },
    toSpotCheck(item) {
      this.showModal(item)
      this.currentView = 'spot-check-modal'
    },
    viewSpotCheck(item) {
      this.showModal(item)
      this.currentView = 'spot-check-view'
    },
    showModal(item) {
      this.resource = item
      this.visible = true
    }
  }
}
</script>

<style lang="less">
.spot-check-error {
  position: relative;
  padding-left: 38px;

  > .porosicon {
    position: absolute;
    left: 0;
    top: 0;
    color: #faad14;
    font-size: 22px;
  }

  &__title {
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    line-height: 1.4;
  }
}
</style>